<template>
    <div class="huoti">
        <video ref="video" autoplay></video>
        <button @click="doClick">开始录制</button>
    </div>
</template>
  
<script>
export default {
    methods: {
        doClick() {
            // 获取 video 元素
            const video = this.$refs.video;
            // 获取摄像头视频流
            navigator.mediaDevices.getUserMedia({ video: true })
                .then(stream => {
                    video.srcObject = stream;
                    video.play();
                })
                .catch(error => {
                    console.error(error);
                });
        }
    },
    mounted() {

    }
}
</script>
<style lang="less" scoped>
@a: 3.75vw;

.huoti {
    video {
        width: (300/@a);
        height: (300/@a);
    }
}
</style>